<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 目录管理 -->
        <el-form label-width="80px">
          <el-row type="flex">
            <el-col :span="5">
              <el-form-item label="关键字" prop="directoryName">
                <el-input
                  v-model="pageParms.directoryName"
                  placeholder="请输入目录"
                  size="small"
                  style="width: 190px"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="状态" prop="state">
                <el-select
                  v-model="pageParms.state"
                  size="small"
                  style="width: 190px"
                >
                  <el-option label="启用" :value="1"> </el-option>
                  <el-option label="禁用" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item>
                <el-button size="small" @click="code">清除</el-button>
                <el-button size="small" type="primary" @click="searchVaChange"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>

              <el-col :span="6" >
                <el-form-item>
                  <el-row type="flex" justify="end">
                    <el-button
                    type="text"
                    size="small"
                    v-if="$route.query.subjectName && $route.query.id"
                    icon="el-icon-back"
                    @click="$router.back()"
                    >返回学科</el-button
                  >

                  <el-button
                    size="small"
                    type="success"
                    @click="addCatalogueClick(null)"
                    ><i class="el-icon-edit"></i> 新增目录</el-button
                  >
                  </el-row>
                </el-form-item>
              </el-col>
          </el-row>
        </el-form>

        <el-tag type="info" style="width: 100%"
          ><i class="el-icon-info"></i> 数据一共{{ total }}条</el-tag
        >

        <el-table
          :data="depts"
          style="width: 100%; padding-top: 15px"
          :header-cell-style="styleBgcColor"
        >
          <el-table-column
            type="index"
            label="序号"
            width="70px"
          ></el-table-column>
          <el-table-column
            prop="subjectName"
            label="所属学科"
          ></el-table-column>
          <el-table-column
            prop="directoryName"
            label="目录名称"
          ></el-table-column>
          <el-table-column prop="username" label="创建者"></el-table-column>
          <el-table-column prop="addDate" label="创建日期"></el-table-column>
          <el-table-column prop="totals" label="面试题数量"></el-table-column>
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              <span v-if="row.state === 1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button type="text" @click="buttonClick(row.id, row.state)">
                <span v-if="row.state === 1">禁用</span>
                <span v-else>启用</span>
              </el-button>
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="addCatalogueClick(row.id)"
                >修改</el-button
              >
              <el-button
                type="text"
                :disabled="row.state === 1"
                @click="delClick(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="padding-top: 20px">
          <el-pagination
            background
            :current-page="pageParms.page"
            :page-size="pageParms.pagesize"
            :page-sizes="[10, 15, 20]"
            :total="this.total"
            @current-change="handlecurrChange"
            @size-change="handleChange"
            layout="prev, pager, next,sizes, jumper"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <directorys-add
      ref="directorysAdd"
      :show-dialog.sync="showDialog"
      @addDepatList="getdirlistData"
      :add-id="addId"
    >
    </directorys-add>
  </div>
</template>

<script>
import { changeState, list, remove } from '../../api/hmmm/directorys'
import directorysAdd from '../components/directorys-add.vue'
export default {
  components: { directorysAdd },
  data () {
    return {
      depts: [],
      pageParms: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null
      },
      total: 0,
      showDialog: false,
      addId: null
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.subjectName) {
      return this.getdirlistData()
    }
    this.getCatalogueList()
  },

  // 表格序号
  indexMethod (index) {
    return index + 1
  },
  methods: {
    async getdirlistData () {
      const { data } = await list({
        ...this.pageParms,
        subjectID: this.$route.query.id
      })
      this.depts = data.items
      this.total = data.counts
      const dayjs = require('dayjs')
      this.depts.map((item) => {
        item.addDate = dayjs(new Date(item.addDate)).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      })
      // this.getCatalogueList()
    },
    delClick (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          if (this.depts.length === 1 && this.pageParms.page > 1) {
            this.pageParms.page--
          }
          this.getdirlistData()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击新增
    addCatalogueClick (id) {
      this.showDialog = true
      this.addId = id
      this.$nextTick(() => {
        this.$refs.directorysAdd.getCoreData()
        this.$refs.directorysAdd.getcataList()
      })
    },
    // 模糊查询
    searchVaChange () {
      this.getdirlistData()
      this.pageParms.page = 1
    },
    // 清空
    code () {
      this.pageParms.directoryName = ''
      this.pageParms.state = null
      this.pageParms.page = 1
      this.getdirlistData()
    },

    handlecurrChange (currPage) {
      this.pageParms.page = currPage
      this.getdirlistData()
    },
    handleChange (pageSize) {
      this.pageParms.pagesize = pageSize
      this.getdirlistData()
    },
    // table表格，表头的背景色
    styleBgcColor () {
      return 'background-color:rgb(250,250,250)'
    },
    async buttonClick (id, state) {
      if (state === 1) {
        state = 0
      } else if (state === 0) {
        state = 1
      }
      await changeState({ id, state })
      this.getdirlistData()
    },
    async getCatalogueList () {
      const res = await list(this.pageParms)
      this.depts = res.data.items
      this.total = res.data.counts

      const dayjs = require('dayjs')
      this.depts.map((item) => {
        item.addDate = dayjs(new Date(item.addDate)).format(
          'YYYY-MM-DD HH:mm:ss'
        )
      })
    }
  }
}
</script>

<style scoped>
/* .breadcrumb {
  margin-bottom: 15px;
} */
/* .right {
  float: right;
} */
</style>
